<template>
  <div>
    <h3>成绩</h3>
    <p v-html="message"></p>
    <van-circle
      v-model="formRate"
      :rate="currentRate"
      :speed="100"
      :size="'200px'"
      :text="text"
    />
    <dl class="errorlist" v-if="errorList.length > 0">
      <dt>错误列表</dt>
      <dd v-for="item in errorList">
        <span>{{item.ask}}</span><font class="error">{{item.answer}}</font>
      </dd>
    </dl>
    <div style="margin:0 40px;">
      <van-button  size="large" @click="restart" type="primary">重新开始</van-button>
    </div>
    
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  data(){
    return {
      formRate: 0
    }
  },
  computed: {
    ...mapState({
      statistics: state => state.statistics,
      errorList: state => state.errorList
    }),
    currentRate(){
      let currentRate = this.statistics.score / this.statistics.count * 100;
      return currentRate
    },
    text(){
      let text = (this.statistics.score / this.statistics.count * 100).toFixed(0);
      return '完成' + text + '%'
    },
    message(){
      let message = '180秒做了' + this.statistics.count + '题'
      if(this.errorList.length > 0 ){
        message += '<br/>错了<font style="color: #ff0000; margin: 0 5px;">' + this.errorList.length + '</font>题'
      }
      if(this.statistics.count.length > 0 && this.errorList.length == 0){
        this.$toast({
            position: 'center',
            message:  '满分！你真的太棒了！超过了所有小朋友，继续保持哟！'
          });
      }
      if(this.errorList.length > 0 && this.errorList.length <= 5){
        this.$toast({
            position: 'center',
            message:  '加油哟，下次一定要争取100分！'
          });
      }
      if(this.errorList.length > 5){
        this.$toast({
            position: 'center',
            message:  '错了好多呀，要多加练习啊！'
          });
      }
      return message
    }
  },
  methods:{
    restart(){
      this.$router.replace('/')
    }
  }
}
</script>
<style>
  dl,dt,dd{margin:0; padding: 0;}
  .errorlist{
    text-align: left;
    padding: 20px;
    width: 60%;
    margin: 40px auto;
  }
  .errorlist dt{
    font-weight: normal;
    color: #aaa;
  }
  .errorlist dd{
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    border-bottom: 1px solid #cccc;
    margin-top: 4px;
  }
  .error{
    color: #ff0000;
    text-decoration:line-through;
  }
  
</style>
